<template>
  <div class="user-profile-component">
    <div class="d-flex align-items-center">
      <img :src="user.avatar ? user.avatar : require('@/assets/column.jpeg')" alt="" class="rounded-circle img-thumbnail" style="width: 60px;">
      <div class="detail ml-2">
        <h6 class="d-block mb-0">{{user.nickName}}</h6>
        <span class="text-truncate text-muted d-block">{{user.description}}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'user-profile',
  props: {
    user: {
      type: Object,
      required: true
    }
  }
})
</script>
